<template>
  <vue-scroll class="page-building">
    <div class="page-header card-base header-accent">
      <h1>
        <span>修改密码</span>
      </h1>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">
          <i class="mdi mdi-home-outline"></i>
        </el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/changepassword' }">修改密码</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-row>
      <el-col>
        <div class="table-box card-base card-shadow--medium">
          <el-form ref="form" :model="form" label-width="120px" label-position="right" class="changepwd">
            <el-col :span="12">
              <el-col class="col-p">
                <el-form-item label="原密码" :label-width="formLabelWidth">
                  <el-input
                    name="oldpassword"
                    type="password"
                    v-model="form.oldpassword"
                    data-vv-validate-on="blur"
                    v-validate="'required|min:6'"
                    data-vv-as="原密码"
                    auto-complete="off"
                  ></el-input>
                  <span class="error">{{ errorBags.first("oldpassword") }}</span>
                </el-form-item>
              </el-col>
              <el-col class="col-p">
                <el-form-item label="新密码" :label-width="formLabelWidth">
                  <el-input
                    name="newpassword"
                    type="password"
                    ref="newpassword"
                    v-model="form.newpassword"
                    data-vv-validate-on="blur"
                    v-validate="'required|min:6'"
                    data-vv-as="新密码"
                    auto-complete="off"
                  ></el-input>
                  <span class="error">{{ errorBags.first("newpassword") }}</span>
                </el-form-item>
              </el-col>
              <el-col class="col-p">
                <el-form-item label="确认新密码" :label-width="formLabelWidth">
                  <el-input
                    name="confirmpassword"
                    type="password"
                    data-vv-validate-on="blur"
                    v-model="form.confirmpassword"
                    v-validate="'required|confirmed:newpassword|min:6'"
                    data-vv-as="确认新密码"
                    auto-complete="off"
                  ></el-input>
                  <span class="error">{{ errorBags.first("confirmpassword") }}</span>
                </el-form-item>
              </el-col>
              <el-col class="col-p">
                <el-form-item>
                  <el-button type="primary" @click="submitClick">提交</el-button>
                  <el-button @click="cancelClick">取消</el-button>
                </el-form-item>
              </el-col>
            </el-col>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </vue-scroll>
</template>

<script>
import axios from "axios";

export default {
  name: "changepassword",
  data() {
    return {
      form: {
        oldpassword: "",
        newpassword: "",
        confirmpassword: "",
      },
      formLabelWidth: "100px",
    };
  },
  methods: {
    cancelClick() {
      this.$router.back();
    },
    submitClick() {
      var that = this;
      this.$validator.validate().then((valid) => {
        if (!valid) {
          // do stuff if not valid.
          return;
        } else {
          axios
            .post("/api/account/changepassword", this.form)
            .then((response) => {
              that.form = {
                oldpassword: "",
                newpassword: "",
                confirmpassword: "",
              };
              console.log(that.form);
              this.$message({
                type: "success",
                message: response.data.message,
              });
            })
            .catch((err) => {
              console.log(err);
            });
        }
      });
    },
  },
  created() {},
  watch: {},
};
</script>

<style lang="scss" scoped>
@import "../../../assets/scss/_variables";
</style>

<style lang="scss">
.changepwd {
  margin-top: 16px;

  .el-form-item {
    margin-bottom: 16px;
  }

  .el-form-item__content {
    line-height: 14px;
  }
  .error {
    color: #d7195d;
    font-size: 12px;
    line-height: 1;
    padding-top: 4px;
  }
  .col-p {
    padding: 0 10px;
    box-sizing: border-box;
  }
}
</style>
